<template>
  <div v-if="localData.buttonType == '自定义'">
    <el-form-item label="提交地址">
      <el-input v-model="localData.url" clearable placeholder="提交地址" />
    </el-form-item>
    <el-form-item label="请求方法">
      <el-select v-model="localData.method" placeholder="请求方法" clearable>
        <el-option label="GET" value="get" />
        <el-option label="POST" value="post" />
      </el-select>
    </el-form-item>
    <el-form-item label="列表">
      <el-input v-model="localData.recordsKey" placeholder="列表" clearable />
    </el-form-item>
    <el-form-item label="返回层级">
      <el-input v-model="localData.resKey" placeholder="返回层级" clearable />
    </el-form-item>

    <div v-if="localData.method == 'post'">
      请求参数
      <div
        tag="ul"
        :list="localData.dicData"
        :group="{ name: 'dic' }"
        ghost-class="ghost"
        handle=".drag-item"
      >
        <li
          v-for="(item, index) in localData.dicData"
          :key="index"
          style="display: flex; justify-content: center; align-items: center; margin: 5px"
        >
          <el-icon class="el-icon drag-item" style="font-size: 16px; margin: 5px; cursor: move"
          ><Operation
          /></el-icon>
          <!-- <i
            class="drag-item el-icon-s-operation"
            style="font-size: 16px; margin: 5px; cursor: move"
          ></i> -->
          <el-input
            style="margin-right: 5px"
            size="default"
            clearable
            v-model="item.key"
            placeholder="label"
          />

          <el-select
            v-model="item.value"
            style="width: 100%;'margin-right':'5px'"
            clearable
            filterable
            allow-create
          >
            <el-option
              v-for="(opt, idx) in notSavedOptions"
              :label="opt.label"
              :value="'&{' + opt.prop + '}'"
              :key="idx"
            />
          </el-select>

          <!--          <el-input :style="{'margin-right':'5px'}"-->
          <!--                    size="mini"-->
          <!--                    clearable-->
          <!--                    v-model="item.value"-->
          <!--                    placeholder="value"></el-input>-->
          <el-button
            @click="handleRemoveFields(index)"
            circle
            plain
            type="danger"
            size="default"
            icon="el-icon-minus"
            style="padding: 4px; margin-left: 5px"
          />
        </li>
      </div>
      <div style="margin-left: 22px">
        <el-button link @click="handleAddFields">添加列 </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConfigButton',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    defaultValues: {
      type: Object,
      default: () => {}
    },
    notSavedOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      option: {
        column: [
          {
            type: 'input',
            prop: 'key',
            label: 'key'
          },
          {
            type: 'input',
            prop: 'value',
            label: 'value'
          }
        ]
      }
    }
  },
  watch: {
    'localData.url': {
      handler() {
        const { click } = this.localData
        // this.$set(this, 'click', click ? click + '' : '({value}) => {}')
      },
      immediate: true
    },
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal)
      },
      deep: true
    }
  },
  methods: {
    handleRemoveFields(index) {
      this.localData.dicData.splice(index, 1)
    },
    handleAddFields() {
      if (!this.localData.dicData) {
        this.localData.dicData = [{ key: ``, value: `` }]
        // this.$set(this.data, 'dicData', [{ key: ``, value: `` }])
      } else {
        this.localData.dicData.push({ key: ``, value: `` })
      }
    }
  }
}
</script>
